<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas画布</title>
</head>

<body>
<canvas id="huabu" width="500" height="500"></canvas>
</body>
<script>
	var huabu=document.getElementById('huabu');
	var hua=huabu.getContext('2d')
	colock();
function colock(){
	hua.clearRect(0,0,500,500)
	hua.fillStyle='#ccc'
	hua.fillRect(0,0,500,500)
	
	function waiyuan(){
		hua.beginPath()
		hua.strokeStyle='rgb(0,0,0)';
		hua.lineWidth=3;
		hua.arc(250,250,80,0,2*Math.PI,true)
		hua.stroke();
		}
	function shizhenkedu(){//时针刻度
		for(var i=0;i<12;i++){
			hua.beginPath()
			hua.lineWidth=2;
			var x=80*Math.cos((i/6)*Math.PI)
			var y=80*Math.sin((i/6)*Math.PI)
			
			var X=65*Math.cos((i/6)*Math.PI)
			var Y=65*Math.sin((i/6)*Math.PI)
			
			hua.moveTo(250+X,250+Y)
			hua.lineTo(250+x,250+y);
			hua.strokeStyle='rgb(255,0,0)';
			hua.stroke();
			
			}
		}
		
	function fenzhenkedu(){//分针刻度
		for(var i=0;i<60;i++){
			hua.beginPath()
			hua.lineWidth=2;
			var x=80*Math.cos((i/30)*Math.PI)
			var y=80*Math.sin((i/30)*Math.PI)
			
			var X=73*Math.cos((i/30)*Math.PI)
			var Y=73*Math.sin((i/30)*Math.PI)
			
			hua.moveTo(250+X,250+Y)
			hua.lineTo(250+x,250+y);
			hua.strokeStyle='rgb(0,0,0)';
			hua.stroke();
			
			}
		}
		
	function miaozhen(){	
		var date=new Date();
		var a=date.getSeconds();
		var b=a%60;
		hua.beginPath();
		hua.lineWidth=2;
		hua.strokeStyle='blue';
		
		var x=55*Math.cos((b/30-0.5)*Math.PI)
		var y=55*Math.sin((b/30-0.5)*Math.PI)
		hua.moveTo(250,250)
		hua.lineTo(250+x,250+y);
		hua.lineTo(250-x/4,250-y/4);
		hua.stroke();
		hua.beginPath();
		hua.fillStyle='white';
		hua.strokeStyle='red'
		hua.lineWidth=1;
		hua.arc(250+0.75*x,250+0.75*y,3,0,2*Math.PI,true)
		hua.fill();
		hua.stroke();
		}
	function fenzhen(){	
		var date=new Date();
		var a=date.getMinutes();
		var b=a%60;
		hua.beginPath();
		hua.lineWidth=2;
		hua.strokeStyle='#555';		
		var x=40*Math.cos((b/30-0.5)*Math.PI)
		var y=40*Math.sin((b/30-0.5)*Math.PI)
		hua.moveTo(250,250)
		hua.lineTo(250+x,250+y);
		hua.lineTo(250-x/4,250-y/4);
		hua.stroke();	
		
		}
	function shizhen(){	
		var date=new Date();
		var a=date.getTime();
		var b=a%43200000;
		hua.beginPath();
		hua.lineWidth=3;
		hua.strokeStyle='#000';
		
		var x=25*Math.cos((b/21600000-1.166)*Math.PI)
		var y=25*Math.sin((b/21600000-1.166)*Math.PI)
		hua.moveTo(250,250)
		hua.lineTo(250+x,250+y);
		hua.lineTo(250-x/4,250-y/4);
		hua.stroke();	
		}
	function yuanxin(){
		hua.beginPath();
		hua.lineWidth=1;
		hua.fillStyle='#fff';
		hua.arc(250,250,3,0,2*Math.PI,true)
		hua.fill();
		hua.strokeStyle='red';
		hua.arc(250,250,4,0,2*Math.PI,true);
		hua.stroke();
		}
	
	fenzhenkedu()
	shizhenkedu()
	waiyuan();
	miaozhen();
	fenzhen();
	shizhen();
	yuanxin();
	setTimeout(colock,10)
	}
</script>
</html>
